<!--main-contentcontainer
 * @Description: 
 * @Version: 2.0
 * @Autor: wiz
 * @Date: 2023-10-09 11:31:13
 * @LastEditors: wiz
 * @LastEditTime: 2023-10-12 11:17:14
-->
<template>
  <div class="main-content">
    <div class="container">
      <div class="header">
        <span>{{ $srv.getI18nByValue('获取您的验证密文') }}</span>
      </div>

      <div class="body">
        <vxe-form
          :data="formData"
          :rules="formRules"
          title-align="right"
          title-width="100"
        >
          <vxe-form-item
            field="userNo"
            :title="$srv.getI18nByValue('用户名')"
            :span="24"
            :item-render="{}"
          >
            <template #default="{ data }">
              <vxe-input
                v-model="data.userNo"
                :placeholder="$srv.getI18nByValue('请输入用户名')"
              ></vxe-input>
            </template>
          </vxe-form-item>
          <vxe-form-item
            field="userPass"
            :title="$srv.getI18nByValue('密码')"
            :span="24"
            :item-render="{}"
          >
            <template #default="{ data }">
              <vxe-input
                type="password"
                v-model="data.userPass"
                :placeholder="$srv.getI18nByValue('请输入密码')"
              ></vxe-input>
            </template>
          </vxe-form-item>
          <vxe-form-item
            field="dbName"
            :title="$srv.getI18nByValue('数据库名称')"
            :span="24"
            :item-render="{}"
          >
            <template #default="{ data }">
              <vxe-input
                v-model="data.dbName"
                :placeholder="$srv.getI18nByValue('请输入数据库名称')"
              ></vxe-input>
            </template>
          </vxe-form-item>
          <!-- <vxe-form-item align="center" title-align="left" :span="24">
            <template #default>
              <vxe-button type="submit">获取</vxe-button>
            </template>
          </vxe-form-item> -->
        </vxe-form>
      </div>

      <div class="footer">
        <Button
          v-if="$srv.utils.noValue(secretKey)"
          type="primary"
          @click="getKey"
          >{{ $srv.getI18nByValue('点击获取验证密文') }}</Button
        >

        <div class="footer-text" v-else>
          <span class="text-left"
            >{{ $srv.getI18nByValue('您的验证密文是') }}：
            <p ref="secretKeys">{{ secretKey }}</p></span
          >
          <Button type="primary" @click="copyLink">{{
            $srv.getI18nByValue('复制')
          }}</Button>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Tsrv, T_srv, ifs, ts, vue, I_cmd, Tcmd } from './config';

@T_srv.comp
export default class gainKey extends vue {
  @T_srv.prop({
    required: false,
    type: Object,
    default: null
  })
  compBoxInfo: ifs.I_compBoxInfo;

  private name: string = 'gainKey';

  private G_compName: string = this.name;

  /* 组件箱信息对象 */
  private GT_compBoxInfo: ifs.I_compBoxInfo;

  /* 组件箱对象 */
  private GT_compBox: ifs.I_compBox;

  /* 组件箱识别ID */
  private G_compID: string;

  /* 指挥部 */
  private GT_command: I_cmd = Tcmd;

  private submitLoading = false;

  // 密文
  private secretKey = '';

  private formRules = {
    userNo: [{ required: true, message: '不能为空，请输入用户名' }],
    userPass: [{ required: true, message: '不能为空，请输入账号密码' }],
    dbName: [{ required: true, message: '不能为空，请输入数据库名称' }]
  };

  private formData = {
    userNo: '',
    userPass: '',
    dbName: this.$store.state.User.dbName
  };

  /**
   * @Author: ssj
   * @description: 获取用户密文key
   */
  public getKey() {
    this.submitLoading = true;
    // dbName, token userID userName userNo (this.$store.state.User.dbName)
    // 从页面或者store中获取
    const req = {
      userNo: this.formData.userNo,
      userPass: Tsrv.utils.EnCode(this.formData.userPass),
      dbName: this.formData.dbName
    };
    Tsrv.standardPostReq<ifs.I_setDataRes, any>(req, Tsrv.url.getKey)
      .then(([res, err]) => {
        // this.$msg(err ?? res.msg);
        // err && this.$msg(err);
        if (res.success) {
          this.secretKey = res.data;
        } else {
          this.$msg(res.msg);
        }
      })
      .catch(e => {
        throw new Error(e);
      });
  }

  /**
   * @Author: ssj
   * @description: 复制 用户密文 到粘贴板上
   */
  copyLink() {
    const txt = this.$refs['secretKeys']['innerText'];
    const textarea = document.createElement('textarea');
    textarea.value = txt;
    // textarea.readOnly = 'readOnly';
    document.body.appendChild(textarea);
    textarea.select();
    const result = document.execCommand('copy');
    if (result) {
      this.$Message.success('复制成功');
    }
    textarea.remove();
  }

  created() {
    // 如果父组件没有传参，那就产生一个
    this.GT_compBoxInfo = Tsrv.getCompInfo(this.compBoxInfo);
    this.G_compID = this.GT_compBoxInfo.compID;
    this.GT_compBox = this.GT_compBoxInfo.TcompBox;
    this.GT_command.init(this, this.GT_compBoxInfo);
  }

  mounted() {
    /* 向父组件发送实例 */
    this.GT_compBox.addCompMergeName(this.G_compID, this.G_compName, this);
    this.$emit('compBoxInfo', this.GT_compBoxInfo);
  }

  destroyed() {
    /* 注册组件销毁 */
    this.GT_compBox.removeCompMergeName(this.G_compID, this.G_compName);

    /* 如果父组件传入的compBoxInfo则删除本文件产生的引用,反之是本组件产生的ID统一删除 */
    if (Tsrv.utils.isEmpty(this.compBoxInfo)) {
      this.GT_compBox.removeCompsWithCompID(this.G_compID);
    } else {
      this.GT_compBox.removeCompsMergeName(this.G_compID, [
        `'${this.G_compName}'`
      ]);
    }
  }
}
</script>
<style lang="scss" scoped>
.main-content {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  background-color: rgb(233, 236, 243);

  .container {
    height: 50%;
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    background-color: #fff;
    position: fixed;
    top: 25%;
    border: 1px solid skyblue;
    border-radius: 5px;
    box-shadow: 0px 0px 12px -5px rgb(0, 0, 0, 0.4);

    .header {
      height: 15%;
      display: flex;
      justify-content: space-around;
      align-items: center;
      font-size: 2rem;
      font-weight: 700;
    }

    .body {
      width: 70%;
      height: 55%;
      display: flex;
      justify-content: space-around;
      align-items: center;
      border: 1px solid #eaebef;
      border-radius: 11px;
      // box-shadow: 0px 0px 12px -5px rgb(0, 0, 0, 0.4);
      // .vxe-form {
      //   .vxe-form--item {
      //     padding: 2em 0.8em 0em 0;
      //   }
      // }
    }

    .footer {
      height: 15%;
      display: flex;
      justify-content: space-around;
      align-content: center;
      align-items: center;
      max-width: 70%;
      // width: 70%;
      .footer-text {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        .text-left {
          width: 70%;
          // display: inline-block;
          display: flex;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }
}
</style>
